<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	body {
		background: none;
	}
	.relateSlider {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #FFF;
		padding: 10px 0 15px;
		z-index: 12;
	}
	.relateSlider .swiper-slide {
		width: 5rem;
	}
	.relateSlider .photo {
		width: 5rem;
		height: 5rem;
		overflow: hidden;
		border-radius: 0.25rem;
	}
	.relateSlider .title {
		font-size: 0.5rem;
		color: #444;
	}
	.relateSlider .nowPrice {
		font-size: 0.6rem;
		color: #333;
	}
	.relateSlider .quan {
		font-size: 0.5rem;
		color: #F94C6E;
		height: 0.9rem;
		line-height: 1.1;
		padding: 0 0.35rem;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		-webkit-transform-origin: center right;
		transform-origin: center right;
	}
	.relateSlider .quan:before {
		border-color: #F94C6E;
		border-radius: 0.9rem;
	}
	.relateSlider .quan dt {
		margin-right: 0.1rem;
		padding-right: 0.2rem;
		position: relative;
	}
	.relateSlider .quan dt:before {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		width: 1px;
		height: 200%;
		background: #F94C6E;
		-webkit-transform: translate(0,-50%) scale(0.5);
		transform: translate(0,-50%) scale(0.5);
	}
</style>
</head>

<body>
<div id="app">
	<div class="popOverlay" tapmode onClick="closeRelate();"></div>
	<div class="relateSlider">
		<div class="swiper-container" id="slider">
			<div class="swiper-wrapper">
				
				<div v-for="it in postInfo.goods" :data-id="it.shop_id" class="swiper-slide" tapmode onClick="openProduct(this);">
					<div class="photo bgCover" :style="{ 'background-image' : 'url('+ it.pict_url +')' }"></div>
					<div class="title aui-ellipsis-2">{{ it.title }}</div>
					<div class="aui-flex-col aui-flex-middle aui-flex-between">
						<div class="nowPrice font-helvet flex-auto aui-ellipsis-1">¥{{it.coupon_amount}}</div>
						<dl class="quan outline aui-flex-col aui-flex-middle" v-if="it.coupon_info">
							<dt>券</dt>
							<dd>{{it.coupon_info}}元</dd>
						</dl>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
var vm;
var vuedata = {
	postInfo: {}
};


apiready = function() {
	api.parseTapmode();
	vuedata.postInfo = api.pageParam.postInfo;
	vm = new Vue({
		el: '#app',
		data: vuedata,
		mounted: function() {
			this.$nextTick(function () {
				sliderInit();
			})
		},
	});
};

function sliderInit(){
	new Swiper('#slider',{
		speed: 600,
		slidesPerView :'auto',
		spaceBetween : 10,
		slidesOffsetBefore : 10,
		slidesOffsetAfter : 10,
		freeMode : true,
	})
}
//跳转商品详情
function openProduct(el){
	var id = $$(el).data('id');
	openProductDetail(id);
}
//关闭frame
function closeRelate(){
	api.execScript({
		script:'closeRelate();'
	});
}
</script>
</html>
